<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 创建XHR对象的构造函数 (重点)
        let x = new XMLHttpRequest()
            // 2. 初始化发起一个请求（重点）
            // x.open('get', 'http://localhost/getServer?name=laowang&id=123')
        x.open('get', 'http://localhost/delayServer')
            // 3. 设置请求头（重点）- (可选)
        x.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        // 4. 发送请求（重点）
        x.send();
        // 5. 绑定readyState改变的监听（重点）
        x.onreadystatechange = function() {
            // 6. 标识请求状态的只读属性（重点）
            if (x.readyState === 4) {
                if (x.status >= 200 && x.status < 300) {
                    // 成功
                    console.log(x.getAllResponseHeaders());
                    console.log(x.getResponseHeader('content-length'));
                }
            }
        }
    </script>
</body>

</html>